<template>
	<div class="main">
		<div class="left">
			<p>游侠</p>
			<p>攻略</p>
		</div>
		<div class="right">
			<div class="news-swiper">
			  <ul class="swiper-wrapper">
			    <li class="swiper-slide" v-for="item in lists" :key="item.id">
					<i></i>{{item.title}}
				</li>
			  </ul>
			</div>
		</div>
	</div>
</template>

<script>
	//引入vue周期函数
	import {onMounted} from 'vue';
	import Swiper,{Autoplay} from 'swiper';
	Swiper.use([Autoplay]);
	
	export default {
		name:'News',
		props:['propnews'],
		data(){
			return {
				lists:[]
			}
		},
		watch:{
			propnews(){
				this.lists = this.propnews.News;
				new Swiper('.news-swiper',{
					direction : 'vertical',
					slidesPerView : 2, 
					autoplay:{
						delay : 2000,
						stopOnLastSlide : false,
						disableOnInteraction:false,
					}
				})
			}
		},
	}
</script>

<style scoped>
	.main{
		width: 100%;
		padding: 0.1rem 0;
		margin-top: 0.1rem;
		overflow: hidden;
		display: flex;
		color: #484848;
		background: linear-gradient(180deg,#ffffb5,rgba(255,255,255,0.6));
	}
	.left{
		width: 15%;
		color: #d0c73e;
		padding: 0.1rem 0.2rem;
		font-style: italic;
		font-size: 0.6rem;
		font-weight: bold;
	}
	.right{
		width: 85%;
		height: 1.5rem;
		overflow: hidden;
	}
	.right .swiper-slide{
		line-height: 0.7rem;
		font-size: 0.33rem;
		text-align: left;
	}
	ul li{
		overflow: hidden;
		white-space:nowrap;
		text-overflow: ellipsis;
	}
	.right .swiper-slide i{
		display: inline-block;
		margin:0 0.2rem;
		width: 0.25rem;
		height: 0.25rem;
		border-radius: 50%;
		background-color: #FFA500;
	}
	.right .swiper-wrapper{
		height: 1.3rem;
	}
</style>
